<template>
  <div id="app">
    <Header v-if="$route.meta.showHeader"></Header>
    <van-icon
      name="apps-o"
      class="main-icon"
      @click="showPopup"
      v-if="$route.meta.showPopup"
    />
    <transition mode="out-in">
      <!-- 占位符 -->
      <router-view></router-view>
    </transition>
    <!-- 左侧弹出层 -->
    <van-popup
      v-model="show"
      position="left"
      :style="{ width: '85%', height: '100%' }"
    >
      <div class="popup">
        <div class="zil">
          <van-image
            round
            fit="cover"
            width="60px"
            height="50px"
            :src="ziliao.avatarUrl"
          />
          <van-cell :title="ziliao.nickname" is-link @click="usezl" />
        </div>
        <div class="vip">
          <div>
            <li>
              续费黑胶VIP
              <p>会员中心</p>
            </li>
            <li>立享21项专属特权</li>
          </div>
          <van-cell
            title="受邀专享，黑胶首月仅需3.8元"
            style="
              background: url('https://img1.baidu.com/it/u=2900520078,2040325801&fm=26&fmt=auto');
              color: #ccc;
            "
          >
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-icon name="vip-card" class="search-icon" />
            </template>
          </van-cell>
        </div>
        <div class="message">
          <li>
            <van-cell
              title="消息中心"
              icon="envelop-o"
              is-link
              @click="email"
            />
          </li>
          <li>
            <van-cell title="云贝中心" icon="balance-o" is-link />
          </li>
          <li>
            <van-cell title="创作者中心" icon="flower-o" is-link />
          </li>
        </div>
        <div class="message">
          <li>
            <van-cell title="云村有票" icon="refund-o" is-link />
          </li>
          <li>
            <van-cell title="商城" icon="shopping-cart-o" is-link />
          </li>
          <li>
            <van-cell title="游戏专区" icon="birthday-cake-o" is-link />
          </li>
          <li>
            <van-cell title="口袋铃声" icon="flower-o" music-o is-link />
          </li>
        </div>
        <div class="message">
          <li>
            <van-cell title="设置" icon="setting" is-link />
          </li>
          <li>
            <van-cell title="夜间模式" icon="eye-o">
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <template #right-icon>
                <van-icon name="weapp-nav" class="search-icon" />
              </template>
            </van-cell>
          </li>
          <li>
            <van-cell title="定时关闭" icon="clock" is-link />
          </li>
          <li>
            <van-cell title="个性装扮" icon="shop-collect" is-link />
          </li>
          <li>
            <van-cell value="未开启" is-link>
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <van-icon name="service-o" class="search-icon" />
                <span class="custom-title">边听边存</span>
              </template>
            </van-cell>
          </li>
          <li>
            <van-cell title="在线听歌免流量" icon="debit-pay" music-o is-link />
          </li>
          <li>
            <van-cell title="音乐黑名单" icon="cross" is-link />
          </li>
          <li>
            <van-cell value="未开启" is-link>
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <van-icon name="shield-o" class="search-icon" />
                <span class="custom-title">青少年模式</span>
              </template>
            </van-cell>
          </li>
          <li>
            <van-cell title="音乐闹钟" icon="underway-o" is-link />
          </li>
        </div>
        <div class="message">
          <li>
            <van-cell title="我的订单" icon="balance-list-o" is-link />
          </li>
          <li>
            <van-cell title="优惠券" icon="invitation" is-link />
          </li>
          <li>
            <van-cell title="我的客服" icon="service-o" is-link />
          </li>
          <li>
            <van-cell title="分享网易云音乐" icon="share-o" music-o is-link />
          </li>
          <li>
            <van-cell title="关于" icon="info-o" music-o is-link />
          </li>
        </div>
        <div style="margin: 16px">
          <van-button round block @click="delcook" v-show="gettoken()"
            >退出登录</van-button
          >
        </div>
      </div>
      <!-- <PopupLeft></PopupLeft> -->
    </van-popup>
    <!-- <template id="popupLeft"></template> -->
    <Footer v-if="$route.meta.showFooter"></Footer>
  </div>
</template>

<script>
import Header from "./components/Head.vue";
import Footer from "./components/Footer.vue";
import axios from "../src/axios/index";
import { removeToken } from "../src/utils/auth";
export default {
  name: "App",
  data() {
    return {
      show: false,
      ziliao: [],
    };
  },
  components: {
    Header,
    Footer,
  },
  methods: {
    //展示弹出层
    showPopup() {
      this.show = true;
      this.getdetail();
    },
    tosinger() {
      console.log(11);
      this.show = false;
      this.$router.push({
        path: "/singerSort",
      });
    },
    //获取登录状态
    async getdetail() {
      if (!localStorage.getItem("token")) {
        this.ziliao = [];
      } else {
        axios.get("/login/status", { withCredentials: true }).then((res) => {
          this.ziliao = res.data.data.profile;
          localStorage.setItem("uid", res.data.data.profile.userId);
        });
      }
    },
    //获取用户信息
    usezl() {
      if (localStorage.getItem("token") != null) {
        this.$router.push("/personal");
      } else {
        this.$router.push("/logreg");
      }
      this.show = false;
    },
    //消息中心

    email() {
      this.show = false;
      if (localStorage.getItem("token") != null) {
        this.$router.push("/message");
      } else {
        this.$router.push("/logreg");
      }
    },
    //删除token
    delcook() {
      this.show = false;
      localStorage.removeItem("token");
      localStorage.removeItem("uid");
      removeToken("token");
      removeToken("uid");
      this.ziliao = [];
    },
    gettoken() {
      return localStorage.getItem("token");
    },
  },
  created() {
    this.getdetail();
  },
};
</script>

<style scoped>
/* 设置模块滑动效果 */
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
/* 过渡的过程 */
.v-enter-active,
.v-leave-to {
  transition: all 0.3s ease;
}
.main-icon {
  font-size: 20px;
  position: absolute;
  top: 15px;
  left: 10px;
}
.zil {
  display: flex;
  padding: 10px;
  margin-top: 10px;
}

.message {
  border: 2px solid #ccc;
  border-radius: 20px;
  margin: 10px;
  overflow: hidden;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}

.vip {
  border: 2px solid #ccc;
  border-radius: 20px;
  margin: 10px;
  overflow: hidden;
  color: white;
  background: url("https://img1.baidu.com/it/u=2900520078,2040325801&fm=26&fmt=auto");
  padding-top: 20px;
}

.vip li {
  margin-left: 15px;
  display: flex;
}

.vip li:nth-child(1) {
  justify-content: space-between;
}

.vip li:nth-child(1) p {
  font-size: 12px;
  margin-right: 20px;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 20px;
}

.vip li:nth-child(2) {
  font-size: 12px;
  margin: 10px 15px;
}
</style>
